<template>
  <div class="personInfor-page">
    <div class="personInfor-title"></div>
    <div class="personInfor-content">
      <!-- 租赁人员年龄分布  男女比例-->
      <div class="personInfor-gird personInfor-gird-one">
        <div class="personInfor-gird-one-l">
          <img class="personInfor-gird-title" src="@/assets/img/HouseRentPro/title01.png" alt="" />
          <div class="add-trend">
            <pie-pbulic
              @click="fullSc('pie-pbulic', personHouseData.priceIndexData)"
              v-if="Object.keys(personHouseData.priceIndexData).length > 0"
              :housingSupplyStatsData="personHouseData.priceIndexData"
              :name="'人员年龄分布'"
              class="h263"
              style="width: 100%"
            ></pie-pbulic>
            <div class="time-com">
              {{ personHouseData.data1[0] }}至{{ personHouseData.data1[1] }}
              <img src="@/assets/img/realEstate/triangle.png" alt="" />
            </div>
            <div
              class="time-com time-com-city"
              style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
            >
              {{ personHouseData.cityName1 }}
              <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
            </div>
            <city
              :cityName="personHouseData.cityName"
              :type="{ type: 1, options: personHouseData.getRegionListData }"
              @cityValueChange="cityValueChange"
            ></city>
            <timeSelect :type="{ type: 1, times: personHouseData.data1 }" @timeValueChange="timeValueChanges"></timeSelect>
          </div>
        </div>
        <div class="personInfor-gird-one-r">
          <img class="personInfor-gird-title" src="@/assets/img/HouseRentPro/title02.png" alt="" />
          <div class="add-trend">
            <pie-pbulic
              @click="fullSc('pie-pbulic', personHouseData.priceIndexData1)"
              v-if="Object.keys(personHouseData.priceIndexData1).length > 0"
              :name="'男女比例'"
              :housingSupplyStatsData="personHouseData.priceIndexData1"
              class="h263"
              style="width: 100%"
            ></pie-pbulic>
          </div>
        </div>
      </div>

      <!-- map -->
      <div class="personInfor-gird personInfor-gird-two" style="position: relative; background-color: rgba(0, 0, 0, 0)">
        <mapBox
          v-if="Object.keys(personHouseData.personHouseMiddleData).length > 0"
          :housingSupplyStatsData="personHouseData.personHouseMiddleData"
          :cityName="personHouseData.cityName"
          @mapNameChange="mapNameChange"
          style="height: 100%; width: 100%"
        ></mapBox>
        <div class="map-address">
          辽宁省{{ personHouseData.cityName == "辽宁省" || personHouseData.cityName == "" ? "" : "-" + personHouseData.cityName }}
        </div>
        <div class="time-com-city-maptime" style="position: relative">
          <el-row :gutter="20">
            <el-col v-for="(item, index) in personHouseData.titleList" :key="index" :span="8"
              ><div class="grid-content ep-bg-purple">
                <img :src="item.imgURL" alt="" />
                <div class="grid-content-name">{{ item.name }}</div>
                <div class="grid-content-num">{{ item.num }}套</div>
              </div>
            </el-col>
          </el-row>
          <div
            class="time-com time-com-city-map-r"
            style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
          >
            {{ personHouseData.data4 }}
            <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <div
            class="time-com time-com-city-map"
            style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
          >
            {{ personHouseData.cityName4 }}
            <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <city
            :cityName="personHouseData.cityName"
            class="time-com-city-maprb"
            :type="{ type: 4, options: personHouseData.getRegionListData }"
            @cityValueChange="cityValueChange"
          ></city>
          <timeYear :type="{ type: 4, times: personHouseData.data4 + '01' }" @timeValueChange="timeValueChanges"></timeYear>
        </div>
      </div>

      <!-- 租赁房源信息分布统计  -->
      <div class="personInfor-gird personInfor-gird-three">
        <img class="personInfor-gird-title" src="@/assets/img/HouseRentPro/title03.png" alt="" />
        <div class="add-trend">
          <markScatter
            @click="fullSc('markScatter', personHouseData.seriesData)"
            v-if="personHouseData.seriesData.length > 0"
            ref="publicStatistics"
            :housingSupplyStatsData="personHouseData.seriesData"
            class="h263"
            style="width: 100%"
          ></markScatter>
        </div>
        <div class="time-com" style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box">
          {{ personHouseData.data2 }}
          <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
        </div>
        <div
          class="time-com time-com-city2"
          style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
        >
          {{ personHouseData.cityName2 }}
          <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
        </div>
        <div
          class="time-com time-com-city1"
          style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
        >
          {{ personHouseData.mjName }}
          <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
        </div>
        <div
          class="time-com time-com-city"
          style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
        >
          {{ personHouseData.hxName }}
          <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
        </div>
        <city
          :cityName="personHouseData.cityName"
          class="time-com-city-rOneb"
          :type="{ type: 2, options: personHouseData.getRegionListData }"
          @cityValueChange="cityValueChange"
        ></city>
        <city
          :cityName="'辽宁省'"
          class="time-com-city-rtwob"
          :type="{ type: 9, options: personHouseData.getBaseDropDownData[1] }"
          @cityValueChange="cityValueChange"
        ></city>
        <city :cityName="'辽宁省'" :type="{ type: 10, options: personHouseData.getBaseDropDownData[0] }" @cityValueChange="cityValueChange"></city>
        <timeYear :type="{ type: 2, times: personHouseData.data2 + '01' }" @timeValueChange="timeValueChanges"></timeYear>
      </div>

      <!-- 获取租赁市场供需走势 -->
      <div class="personInfor-gird personInfor-gird-four">
        <img class="personInfor-gird-title" src="@/assets/img/HouseRentPro/title04.png" alt="" />
        <div class="add-trend">
          <bar-line-pbulic
            @fullScTime="fullScTime"
            class="h263"
            style="width: 100%"
            v-if="Object.keys(personHouseData.priceTrendData).length > 0"
            :housingSupplyStatsData="personHouseData.priceTrendData"
          ></bar-line-pbulic>
          <div
            class="time-com time-com-city-r"
            style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
          >
            {{ personHouseData.cityName3 }}
            <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <city
            :cityName="personHouseData.cityName"
            class="time-com-city-rb"
            :type="{ type: 3, options: personHouseData.getRegionListData }"
            @cityValueChange="cityValueChange"
          ></city>
        </div>
      </div>

      <!-- 省内新增租赁人员户籍来源排名 -->
      <div class="personInfor-gird personInfor-gird-five">
        <img class="personInfor-gird-title" src="@/assets/img/HouseRentPro/title05.png" alt="" />
        <table-list
          v-if="Object.keys(personHouseData.getLeasePersonSourceRankData).length > 0"
          :housingSupplyStatsData="personHouseData.getLeasePersonSourceRankData"
          :mapInd="1"
          class="h263"
          style="width: 100%"
        ></table-list>
        <div class="time-com" style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box">
          {{ personHouseData.data8 }}
          <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
        </div>
        <div
          class="time-com time-com-city"
          style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
        >
          {{ personHouseData.cityName8 }}
          <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
        </div>
        <city
          :cityName="personHouseData.cityName"
          :type="{ type: 8, options: personHouseData.getRegionListData }"
          @cityValueChange="cityValueChange"
        ></city>
        <timeYear :type="{ type: 8, times: personHouseData.data8 + '01' }" @timeValueChange="timeValueChanges"></timeYear>
      </div>

      <!-- 租赁房屋管理数据分析 -->
      <div class="personInfor-gird personInfor-gird-sex">
        <img class="personInfor-gird-title" src="@/assets/img/HouseRentPro/title06.png" alt="" />
        <div class="add-trend">
          <bubble
            @click="fullSc('bubble', personHouseData.personHouseCommodityData)"
            v-if="Object.keys(personHouseData.personHouseCommodityData).length > 0"
            :housingSupplyStatsData="personHouseData.personHouseCommodityData"
            class="h263"
            style="width: 100%"
          ></bubble>
        </div>
        <div class="time-com" style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box">
          {{ personHouseData.data5 }}
          <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
        </div>
        <div
          class="time-com time-com-city"
          style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
        >
          {{ personHouseData.cityName5 }}
          <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
        </div>
        <city
          :cityName="personHouseData.cityName"
          :type="{ type: 5, options: personHouseData.getRegionListData }"
          @cityValueChange="cityValueChange"
        ></city>
        <timeYear :type="{ type: 5, times: personHouseData.data5 + '01' }" @timeValueChange="timeValueChanges"></timeYear>
      </div>

      <!-- 租赁价格信息监测分析 -->
      <div class="personInfor-gird personInfor-gird-seven">
        <img class="personInfor-gird-title" src="@/assets/img/HouseRentPro/title07.png" alt="" />
        <div class="add-trend">
          <bar-line-pbulic
            @fullScTime="fullScTime"
            class="h263"
            style="width: 100%"
            v-if="Object.keys(personHouseData.housingVacancyRateData).length > 0"
            :housingSupplyStatsData="personHouseData.housingVacancyRateData"
          ></bar-line-pbulic>
          <div
            class="time-com time-com-city-r"
            style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
          >
            {{ personHouseData.cityName6 }}
            <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <city
            :cityName="personHouseData.cityName"
            class="time-com-city-rb"
            :type="{ type: 6, options: personHouseData.getRegionListData }"
            @cityValueChange="cityValueChange"
          ></city>
        </div>
      </div>

      <!-- 不同房屋性质月平均租金对比统计 -->
      <div class="personInfor-gird personInfor-gird-eight">
        <img class="personInfor-gird-title" src="@/assets/img/HouseRentPro/title08.png" alt="" />
        <div class="add-trend">
          <bar-line-pbulic-one
            @click="fullSc('bar-line-pbulic-one', personHouseData.residentialRentPriceIndexData)"
            class="h263"
            style="width: 100%"
            v-if="Object.keys(personHouseData.residentialRentPriceIndexData).length > 0"
            :housingSupplyStatsData="personHouseData.residentialRentPriceIndexData"
          ></bar-line-pbulic-one>
          <div class="time-com">
            {{ personHouseData.data7[0] }}至{{ personHouseData.data7[1] }}
            <img src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <div
            class="time-com time-com-city"
            style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
          >
            {{ personHouseData.cityName7 }}
            <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <city
            :cityName="personHouseData.cityName"
            :type="{ type: 7, options: personHouseData.getRegionListData }"
            @cityValueChange="cityValueChange"
          ></city>
          <timeSelect :type="{ type: 7, times: personHouseData.data7 }" @timeValueChange="timeValueChanges"></timeSelect>
        </div>
      </div>

      <!-- 点击放大 type表示是放大的图  其他根据自己组件调整-->
      <el-dialog v-model="personHouseData.dialogVisible" width="60%">
        <component
          :is="personHouseData.componentName"
          v-if="personHouseData.dialogVisible"
          :housingSupplyStatsData="personHouseData.componentParams"
          :type="1"
          :style="{ height: pxToRem(500) + 'px' }"
        ></component>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import barLinePbulic from "@/components/HouseRentPro/barLinePbulic.vue";
import barLinePbulicOne from "@/components/HouseRentPro/barLinePbulicOne.vue";
import piePbulic from "@/components/HouseRentPro/pie.vue";
import bubble from "@/components/HouseRentPro/bubble.vue";
import markScatter from "@/components/HouseRentPro/markScatter.vue";
export default {
  components: { barLinePbulic, piePbulic, barLinePbulicOne, bubble, markScatter },
};
</script>

<script setup lang="ts">
import { pxToRem } from "@/utils/index";
import { barLineParamsData } from "@/utils/chartsPbulic";
import tableList from "@/components/HouseRentPro/tableList.vue";
import mapBox from "@/components/HouseRentPro/map.vue";
import {
  getBaseMap,
  getHouseLeaseAgeDistributed,
  getLeaseSexProportion,
  getLeaseSupplyDemandTrend,
  getRegionLeaseTrend,
  getLeaseBaseData,
  getDiffHouseNatureAvg,
  getRegionList,
  getLeaseHouseDataAnalyze,
  getLeasePersonSourceRank,
  getBaseDropDown,
  getLeaseDistributedStatistics,
} from "@/api/HouseRentPro";
import usePropertyAlertResale from "@/hooks/HouseRentPro/useHouseRentPro";
import timeSelect from "@/components/propertyAlertResale/timeSelect.vue";
import timeYear from "@/components/propertyAlertResale/timeYear.vue";
import city from "@/components/HouseRentPro/city.vue";

const personHouseData = usePropertyAlertResale();
//租赁人员年龄分布  男女比例
const priceIndexData = async () => {
  let { data } = await getHouseLeaseAgeDistributed({
    cityCode: personHouseData.cityCode1,
    startDate: personHouseData.data1[0],
    endDate: personHouseData.data1[1],
  });

  let data1 = await getLeaseSexProportion({
    cityCode: personHouseData.cityCode1,
    startDate: personHouseData.data1[0],
    endDate: personHouseData.data1[1],
  });

  let params = {
    innerColor: ["#E5FC64", "#67EB7D", "#3662EC", "#2586EE", "#25AEEE", "#F0C34B", "#00979C"],
    innerCircle: data,
  };
  let params1 = {
    innerColor: ["#25AEEE", "#F0C34B", "#00979C", "#E5FC64", "#67EB7D", "#3662EC", "#2586EE"],
    innerCircle: data1.data,
  };
  personHouseData.priceIndexData = params;
  personHouseData.priceIndexData1 = params1;
};
// 租赁房源信息分布统计
const transaction = async () => {
  let { data } = await getLeaseDistributedStatistics({
    hx: personHouseData.hxName,
    mjlx: personHouseData.mjName,
    queryDate: personHouseData.data2,
    cityCode: personHouseData.cityCode2,
  });
  personHouseData.seriesData = [data.yczValue, data.wczValue];
};
// 获取租赁市场供需走势
const priceTrend = async () => {
  let { data } = await getLeaseSupplyDemandTrend({
    cityCode: personHouseData.cityCode3,
  });
  let legendStyle = {
    show: true,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "5%",
    top: "25%",
  };
  let paramsData = barLineParamsData(
    ["供给", "出租"],
    data.xAxis,
    [
      {
        name: "套数",
        type: "1",
      },
    ],
    [
      {
        name: "line",
        type: "1",
        areaStyleType: "2",
        stack: "1",
      },
      {
        name: "line",
        type: "1",
        areaStyleType: "2",
        stack: "1",
      },
    ],
    [data.gj, data.cz],
    [
      {
        a: "rgba(74, 111, 227, 1)",
        b: "rgba(74, 111, 227, 0)",
      },
      {
        a: "rgba(240, 195, 75, 1)",
        b: "rgba(240, 195, 75, 0)",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData.priceTrendData = paramsData;
};
// 获取不同房屋性质月平均租金对比统计
const residentialRentPriceIndex = async () => {
  let { data } = await getDiffHouseNatureAvg({
    cityCode: personHouseData.cityCode7,
    startDate: personHouseData.data7[0],
    endDate: personHouseData.data7[1],
  });
  let legendStyle = {
    show: true,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "5%",
    top: "25%",
  };
  let paramsData = barLineParamsData(
    [],
    data.xAxis,
    [
      {
        name: "月租金（元）",
        type: "1",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.yAxis],
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData.residentialRentPriceIndexData = paramsData;
};
// 获取各地租赁均价走势
const generateRandomColor = () => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgba(${r}, ${g}, ${b}`;
};
const housingVacancyRate = async () => {
  let { data } = await getRegionLeaseTrend({
    cityCode: personHouseData.cityCode6,
  });
  let legendStyle = {
    show: true,
    icon: "",
    left: 0,
    top: 20,
    itemWidth: 25,
    itemHeight: 8,
    itemGap: 5,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "5%",
    top: "35%",
  };
  const yAxisWithColors = data.yAxis.map((item: any) => {
    const baseColor = generateRandomColor();
    return {
      a: `${baseColor}, 1)`,
      b: `${baseColor}, 0)`,
    };
  });
  const yAxisWithlen = data.yAxis.map((item: any) => {
    return item.name;
  });
  const yAxisWithData = data.yAxis.map((item: any) => {
    return item.value;
  });
  const typeData = data.yAxis.map((item: any) => {
    return {
      name: "line",
      type: "1",
      areaStyleType: "2",
      stack: "1",
    };
  });

  let paramsData = barLineParamsData(
    yAxisWithlen,
    data.xAxis,
    [
      {
        name: "月租金（元）",
        type: "1",
      },
    ],
    typeData,
    yAxisWithData,
    yAxisWithColors,
    legendStyle,
    gridConfig
  );
  personHouseData.housingVacancyRateData = paramsData;
};
// 获取租赁房屋管理数据分析
const personHouseCommodity = async () => {
  let { data } = await getLeaseHouseDataAnalyze({
    cityCode: personHouseData.cityCode5,
    queryDate: personHouseData.data5,
  });
  // 获取租赁房屋管理数据分析 数据：0出租面积 1出租套数 2 名称 3年月 4租售比 5租赁饱和度  6出租面积同比 7出租面积环比  8出租套数同比 9出租套数环比
  let paramsData = {
    result: data.valueList,
  };
  personHouseData.personHouseCommodityData = paramsData;
};
// 获取省内新增租赁人员户籍来源排名
const getLeasePersonSourceRankFun = async () => {
  let { data } = await getLeasePersonSourceRank({
    cityCode: personHouseData.cityCode8,
    queryDate: personHouseData.data8,
  });
  personHouseData.getLeasePersonSourceRankData = data;
};
//获取总量数据 传值 queryDate 当前月份 / cityCode
const landDealStatistics = async () => {
  let { data } = await getLeaseBaseData({
    cityCode: personHouseData.cityCode4,
    queryDate: personHouseData.data4,
  });
  personHouseData.titleList[0].num = data.czTotal;
  personHouseData.titleList[1].num = data.wqTotal;
  personHouseData.titleList[2].num = data.czryTotal;
};
// 地图
const personHouseMiddle = async () => {
  let { data } = await getBaseMap({});
  personHouseData.personHouseMiddleData = data;
};
// 子组件触发当前选中项
const mapNameChange = (data: any) => {
  if (personHouseData.cityName == data.cityName) {
    (personHouseData.cityName = ""), (personHouseData.cityCode = "210000");
  } else {
    (personHouseData.cityName = data.cityName), (personHouseData.cityCode = data.cityCode);
  }
  personHouseData.cityName1 =
    personHouseData.cityName2 =
    personHouseData.cityName3 =
    personHouseData.cityName4 =
    personHouseData.cityName5 =
    personHouseData.cityName6 =
    personHouseData.cityName7 =
    personHouseData.cityName8 =
      personHouseData.cityName || "辽宁省";
  personHouseData.cityCode1 =
    personHouseData.cityCode2 =
    personHouseData.cityCode3 =
    personHouseData.cityCode4 =
    personHouseData.cityCode5 =
    personHouseData.cityCode6 =
    personHouseData.cityCode7 =
    personHouseData.cityCode8 =
      personHouseData.cityCode || "210000";
  allFun();
};

// 获取当前code下区域列表
const getRegionListFun = async () => {
  let { data } = await getRegionList({ cityCode: "210000" });
  personHouseData.getRegionListData = data;
};

// 获取当前页面基础下拉列表
const getBaseDropDownFun = async () => {
  let { data } = await getBaseDropDown({});
  personHouseData.getBaseDropDownData = Object.keys(data).map((key) => {
    return data[key].map((item: any, index: number) => {
      return { name: item, value: index + 1 };
    });
  });
  console.log(personHouseData.getBaseDropDownData[0]);
};

// 获取时间组件
const timeValueChanges = (va: any) => {
  if (va.type == 1) {
    personHouseData.data1 = va.times;
    priceIndexData();
  } else if (va.type == 2) {
    personHouseData.data2 = va.times;
    transaction();
  } else if (va.type == 4) {
    personHouseData.data4 = va.times;
    landDealStatistics();
  } else if (va.type == 5) {
    personHouseData.data5 = va.times;
    personHouseCommodity();
  } else if (va.type == 7) {
    personHouseData.data7 = va.times;
    residentialRentPriceIndex();
  } else if (va.type == 8) {
    personHouseData.data8 = va.times;
    getLeasePersonSourceRankFun();
  }
};

// 获取城市组件
const cityValueChange = (va: any) => {
  if (va.type == 1) {
    personHouseData.cityCode1 = va.cityValueSy;
    personHouseData.cityName1 = va.name;
    priceIndexData();
  } else if (va.type == 2) {
    personHouseData.cityCode2 = va.cityValueSy;
    personHouseData.cityName2 = va.name;
    transaction();
  } else if (va.type == 3) {
    personHouseData.cityCode3 = va.cityValueSy;
    personHouseData.cityName3 = va.name;
    priceTrend();
  } else if (va.type == 4) {
    personHouseData.cityCode4 = va.cityValueSy;
    personHouseData.cityName4 = va.name;
    landDealStatistics();
  } else if (va.type == 5) {
    personHouseData.cityCode5 = va.cityValueSy;
    personHouseData.cityName5 = va.name;
    personHouseCommodity();
  } else if (va.type == 6) {
    personHouseData.cityCode6 = va.cityValueSy;
    personHouseData.cityName6 = va.name;
    housingVacancyRate();
  } else if (va.type == 7) {
    personHouseData.cityCode7 = va.cityValueSy;
    personHouseData.cityName7 = va.name;
    residentialRentPriceIndex();
  } else if (va.type == 8) {
    personHouseData.cityCode8 = va.cityValueSy;
    personHouseData.cityName8 = va.name;
    getLeasePersonSourceRankFun();
  } else if (va.type == 9) {
    personHouseData.mjName = va.name;
    transaction();
  } else if (va.type == 10) {
    personHouseData.hxName = va.name;
    transaction();
  }
};

// 查询
const allFun = () => {
  transaction();
  personHouseMiddle();
  priceIndexData();
  getRegionListFun();
  getBaseDropDownFun();
  personHouseCommodity();
  priceTrend();
  housingVacancyRate();
  residentialRentPriceIndex();
  landDealStatistics();
  getLeasePersonSourceRankFun();
};

const fullSc = (componentName: any, componentParams: any) => {
  personHouseData.dialogVisible = true;
  personHouseData.componentName = componentName;
  personHouseData.componentParams = componentParams;
};

const fullScTime = (params: any) => {
  if (params == "套数") {
    fullSc("bar-line-pbulic", personHouseData.priceTrendData);
  }
  if (params == "月租金（元）") {
    fullSc("bar-line-pbulic", personHouseData.housingVacancyRateData);
  }
};

allFun();
</script>

<style scoped lang="less">
.h563 {
  height: 433px;
}
.h263 {
  height: 260px;
}
.h361 {
  height: 361px;
}
::v-deep .el-dialog {
  background-color: rgba(8, 64, 132, 0.9);
}
.personInfor-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/personInfor/bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: auto;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    width: 0px;
  }
  .personInfor-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 22px;
    background: url("@/assets/img/HouseRentPro/header-bg.png");
    background-size: 100% 100%;
  }
  .personInfor-content {
    width: 100vw;
    height: calc(100vh - 111px);
    display: grid;
    grid-gap: 20px 18px;
    grid-template: repeat(6, 140px) / repeat(3, 595px);
    place-content: start center;
    .personInfor-gird {
      color: #fff;
      position: relative;
      background: rgba(9, 70, 145, 0.15);
      .personInfor-gird-title {
        width: 100%;
        height: 34px;
      }
      /deep/ .el-select {
        width: 100px !important;
        // height: 16px !important;
        position: absolute;
        top: 45px;
        right: 167px;
        padding: 0;
        z-index: 100;
      }
      /deep/ .time-com-city-rb .el-select {
        width: 100px !important;
        // height: 16px !important;
        position: absolute;
        top: 45px;
        right: 7px;
        padding: 0;
        z-index: 100;
      }
      /deep/ .time-com-city-maprb .el-select {
        width: 100px !important;
        // height: 16px !important;
        position: absolute;
        top: -55px;
        right: 167px;
        padding: 0;
        z-index: 100;
      }
      /deep/ .time-com-city-rOneb .el-select {
        width: 100px !important;
        position: absolute;
        top: 45px;
        right: 387px;
        padding: 0;
        z-index: 100;
      }
      /deep/ .time-com-city-rtwob .el-select {
        width: 100px !important;
        position: absolute;
        top: 45px;
        right: 277px;
        padding: 0;
        z-index: 100;
      }
      /deep/ .el-select--small,
      /deep/ .el-select__wrapper {
        padding: 0 !important;
        opacity: 0;
      }
      /deep/ .el-range-editor.el-input__wrapper {
        width: 150px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 7px;
        padding: 0;
        z-index: 100;
      }
      /deep/ .el-date-editor.el-input {
        width: 150px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 7px;
        padding: 0;
      }
      /deep/ .time-com-city-maptime .el-date-editor.el-input {
        width: 150px;
        height: 16px;
        position: absolute;
        top: -55px !important;
        right: 7px;
        padding: 0;
        z-index: 100;
      }
      /deep/ .el-radio.el-radio--large {
        color: white;
        margin-right: 18px;
      }
      .time-com {
        width: 150px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 7px;
        background: rgba(27, 126, 242, 0.2);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid rgba(41, 240, 250, 0.6);
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        letter-spacing: 1px;
        text-align: right;
        img {
          width: 9px;
          height: 6px;
          position: relative;
          bottom: 2px;
          margin-right: 4px;
        }
      }
      .time-com:hover {
        cursor: pointer;
      }
    }
    .time-com-city,
    .time-com-city1,
    .time-com-city2 {
      width: 100px !important;
      height: 16px;
      position: absolute;
      top: 45px;
      right: 167px !important;
      z-index: 100;
    }
    .time-com-city1 {
      position: absolute;
      top: 45px;
      right: 277px !important;
    }
    .time-com-city2 {
      position: absolute;
      top: 45px;
      right: 387px !important;
    }

    .time-com-city-map {
      width: 100px !important;
      height: 16px;
      position: absolute;
      top: -55px !important;
      right: 167px !important;
      z-index: 100;
    }
    .time-com-city-map-r {
      position: absolute;
      top: -55px !important;
      right: 7px !important;
      z-index: 100;
    }
    .time-com-city-r {
      width: 100px !important;
      height: 16px;
      position: absolute;
      top: 45px;
      right: 7px !important;
      z-index: 100;
    }
    .add-trend {
      display: flex;
      padding: 11px 11px 11px 6px;
      box-sizing: border-box;
      width: 100%;
    }
    .personInfor-gird-one {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      display: flex;
      justify-content: space-between;
      background-color: rgba(0, 0, 0, 0);
      .personInfor-gird-one-l,
      .personInfor-gird-one-r {
        width: 49%;
        background: rgba(9, 70, 145, 0.15);
      }
    }
    .personInfor-gird-two {
      grid-column: 2 / 3;
      grid-row: 1 / 4;
    }
    .personInfor-gird-three {
      grid-column: 3 / 4;
      grid-row: 1 / 3;
    }
    .personInfor-gird-four {
      grid-column: 1 / 2;
      grid-row: 3 / 5;
    }
    .personInfor-gird-five {
      grid-column: 2 / 3;
      grid-row: 5 / 7;
    }
    .personInfor-gird-sex {
      grid-column: 3 / 4;
      grid-row: 3 / 5;
      position: relative;
      .personInfor-gird-four-labed {
        position: absolute;
        top: 0;
        right: 27px;
        z-index: 100;
        display: flex;
        align-items: center;
        div {
          width: 90px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          font-size: 16px;
          color: #ffffff;
          cursor: pointer;
        }
        .active {
          background-image: url("@/assets/img/propertyAlertResale/labed-bg.png");
          background-size: 100% 100%;
        }
      }
    }
    .personInfor-gird-seven {
      grid-column: 1 / 2;
      grid-row: 5 / 7;
    }
    .personInfor-gird-eight {
      grid-column: 3 / 4;
      grid-row: 5 / 7;
      .start-time /deep/ .el-range-editor.el-input__wrapper {
        width: 75px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 82px;
        padding: 0;
        opacity: 1;
      }
      .start-time /deep/ .el-date-editor.el-input {
        width: 75px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 82px;
        padding: 0;
      }
      .end-time /deep/ .el-range-editor.el-input__wrapper {
        width: 75px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 7px;
        padding: 0;
      }
      .end-time /deep/ .el-date-editor.el-input {
        width: 75px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 7px;
        padding: 0;
      }
    }
  }
}

.time-list-box {
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  height: 21px;
}

.map-address {
  position: absolute;
  top: 0px;
  left: 0px;
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px #c1731c;
  font-size: 18px;
  color: #60f9f4;
  letter-spacing: 1.2px;
  margin-left: 27px;
}

.map-address::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -27px;
  width: 20px;
  height: 20px;
  background: url("@/assets/img/personInfor/map-address.png");
  background-size: 100% 100%;
}

.pie-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0rpx 20px 34px 20px;
}
.pie-box-item {
  width: 50%;
  .pie-bg {
    width: 269px;
    height: 16px;
    margin-top: 45px;
    display: block;
  }
}

.grid-content {
  border-radius: 4px;
  text-align: center;
  margin-top: -25px;
  img {
    width: 176px;
    height: 129px;
    margin: 0 auto;
  }
  .grid-content-name {
    font-size: 18px;
    line-height: 25px;
    background: linear-gradient(90deg, #ffffff 0%, #8ea1e2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .grid-content-num {
    font-size: 24px;
    line-height: 34px;
    background: linear-gradient(90deg, #ffffff 0%, #e38319 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
</style>
